<template>
  <f7-page class="bg">
    <f7-link back icon-f7="chevron_left" style="position: absolute;
    top: 50px;
    left: 20px;
    color:white;
    z-index: 11111;"></f7-link>
    <f7-block class="title">
      <p class="p-margin">欢迎来到</p>
      <p>广州市城市更新管理信息系统</p>
    </f7-block>
    <f7-block class="msgs">
      <qm-entrylist-link :data="data"></qm-entrylist-link>
    </f7-block>

    <f7-block class="bottom">
      <div class="btitle">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          fontcolor: "--color-brand",
          bgimg: "static/img/function-entrance/index4/bg/blue.png",
          img: "static/img/function-entrance/index4/update.png",
          title: "更新项目",
        },
        {
          fontcolor: "--color-pomonagreen",
          bgimg: "static/img/function-entrance/index4/bg/green.png",
          img: "static/img/function-entrance/index4/bigscreen.png",
          title: "数据大屏",
        },
        {
          fontcolor: "--color-orange",
          bgimg: "static/img/function-entrance/index4/bg/orange.png",
          img: "static/img/function-entrance/index4/countdata.png",
          title: "统计数据",
        },
        {
          fontcolor: "--color-darkgreen",
          bgimg: "static/img/function-entrance/index4/bg/cyan.png",
          img: "static/img/function-entrance/index4/citywork.png",
          title: "市区工作",
        },
        {
          fontcolor: "--color-pomonagreen",
          bgimg: "static/img/function-entrance/index4/bg/green.png",
          img: "static/img/function-entrance/index4/project.png",
          title: "项目动态",
        },
        {
          fontcolor: "--color-brand",
          bgimg: "static/img/function-entrance/index4/bg/blue.png",
          img: "static/img/function-entrance/index4/video.png",
          title: "宣传视频",
        },
        {
          fontcolor: "--color-red",
          bgimg: "static/img/function-entrance/index4/bg/red.png",
          img: "static/img/function-entrance/index4/rule.png",
          title: "政策法规",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.block {
  margin: 0;
}
.bg {
  // background-image: url("/static/img/function-entrance/index4/bg-header.png"),
  //   url("/static/img/function-entrance/index4/bg-footer.png"),
  //   url("/static/img/function-entrance/index4/bg-body.png");
  // background-size: 100%, 100%, 100%;
  // background-repeat: no-repeat, no-repeat, repeat-y;
  // background-position: center top, center bottom, center top;
  .title {
    background-image: url("../../../../static/img/function-entrance/index4/bg-header.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: calc(44px * var(--ratio));
    color: var(--color-text-base);
    // margin-top: calc(264px * var(--ratio));
    // margin-left: calc(47px * var(--ratio));
    // margin-bottom: calc(40px * var(--ratio));
    padding: 0;
    padding-top: calc(264px * var(--ratio));
    padding-left: calc(47px * var(--ratio));
    // padding-bottom: calc(40px * var(--ratio));
    text-shadow: calc(5px * var(--ratio)) calc(4px * var(--ratio))
      calc(3px * var(--ratio)) rgba(17, 96, 229, 0.66);
    p {
      margin: 0;
    }
  }
  .msgs {
    background-image: url("../../../../static/img/function-entrance/index4/bg-body1.png"),
      url("../../../../static/img/function-entrance/index4/bg-body3.png"),
      url("../../../../static/img/function-entrance/index4/bg-body2.png");
    background-size: 100%, 100%, cover;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-position: center top, center bottom, center top;
    padding-top: calc(40px * var(--ratio));
  }
  .bottom {
    background-image: url("../../../../static/img/function-entrance/index4/bg-footer.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: calc(20px * var(--ratio));
    color: var(--color-text-base);
    // opacity: 0.41;
    text-align: center;
    // margin-top: calc(21px * var(--ratio));
    // margin-bottom: calc(20px *var(--ratio));
    padding-top: calc(21px * var(--ratio));
    padding-bottom: calc(20px * var(--ratio));
    .btitle {
      opacity: 0.41;
    }
  }
}
</style>
